import React, { Component } from 'react'
import { Animated, FlexAlignType, StyleSheet } from "react-native";
import View = Animated.View;
import Toggle from "./toggle";

export default class Flexbox extends Component<{}, {
    flexDirection: "row" | "column" | "row-reverse" | "column-reverse" | string,
    justifyContent: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | string,
    alignItems: FlexAlignType | string
}> {

    state = {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    };

    render() {
        const { flexDirection, alignItems, justifyContent } = this.state;
        const layoutStyle = { flexDirection, justifyContent, alignItems };

        const primaryAxis = flexDirection === 'row' ? 'Horizontal' : 'Vertical';
        const secondaryAxis = flexDirection === 'row' ? 'Vertical' : 'Horizontal';

        return (
            <View style={styles.container}>
                <Toggle
                    label={'Primary axis (flexDirection)'}
                    value={flexDirection}
                    options={['row', 'column']}
                    onChange={option => this.setState({ flexDirection: option })}/>
                <Toggle
                    label={primaryAxis + ' distribution (justifyContent)'}
                    value={justifyContent}
                    options={['flex-start', 'center', 'flex-end', 'space-around', 'space-between']}
                    onChange={option => this.setState({ justifyContent: option })}/>
                <Toggle
                    label={secondaryAxis + ' alignment (alignItems)'}
                    value={alignItems}
                    options={['flex-start', 'center', 'flex-end', 'stretch']}
                    onChange={option => this.setState({ alignItems: option })}/>
                <View style={[styles.layout, layoutStyle]}>
                    <View style={styles.box}/>
                    <View style={styles.box}/>
                    <View style={styles.box}/>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    layout: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.05)'
    },
    box: {
        padding: 25,
        backgroundColor: 'steelblue',
        margin: 5
    }
});
